<style type="text/css">

    .container1 {
    width: 600px;padding: 0;margin: 0 auto;
    }
    .folio_block {
    position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
    .main_view {float: left;position: relative;}
    .window {-moz-box-shadow: 0px 0px 5px #303030;
    -webkit-box-shadow: 0px 0px 5px #303030;
    box-shadow: 0px 0px 1px #303030;border:1px solid #000000;height:300px; width: 600px;
    margin-top:10px;overflow: hidden; position: relative;
    }
    .image_reel {
    position: absolute;top: 0; left: 0;
    }
    .image_reel img {float: left;}
    .paging_btrix {
    position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; text-align: center;
    line-height: 40px;
    background: url() no-repeat;
    display: none;
    }
    .paging_btrix a {
    padding: -200px;text-decoration: none;color: #fff;
    }
    .paging_btrix a.active {
    font-weight: bold; background: #920000; border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    }
    .paging_btrix a:hover {font-weight: bold;}
    </style>

    <div class="container1">
    <div class="main_view">
        <div class="window">
            <div class="image_reel">
                <a href="http://www.bdpusula.com/2014/01/medyada-dunya-sorunlar-ile-ilgili.html" target="_blank"><img src="https://lh6.googleusercontent.com/-nVmbZStuV7I/Uup-NAq08HI/AAAAAAAACGY/lrW9H7Xcg6U/w630-h300-no/kurakl%25C4%25B1k2.png" alt="" /></a>
                <a href="http://www.bdpusula.com/2014/01/kuraklk-konusunda-bilincli-miyiz.html"><img src="https://lh3.googleusercontent.com/-InN51RuUEHo/UupZhZqbE5I/AAAAAAAACD8/HvWxU7sG4VI/w600-h300-no/kuraklik.png" alt="" /></a>
                <a href="http://www.bdpusula.com/2014/01/tehlikeli-is-yerleri.html" target="_blank"><img src="http://2.bp.blogspot.com/-Y-6kTe8xI34/UulQ_q2SWJI/AAAAAAAACDc/SV_euq7E_Jc/s1600/tehlikeli.png" alt="" /></a>
                <a href="http://www.bdpusula.com/2014/01/2013-yl-zam-sampiyonlar.html" target="_blank"><img src="https://lh6.googleusercontent.com/-67PclHhGDDE/Uumam3U9qlI/AAAAAAAACDs/UfI5FRU1Viw/w600-h300-no/2013.png" alt="" /></a>
                <a href="http://www.bdpusula.com/2014/01/bdpusula-ile-roportaj-kitle-iletisim.html" target="_blank"><img src="images/3.png" alt="" /></a>
                <a href="http://www.bdpusula.com/2014/01/canm-affettim.html" target="_blank"><img src="images/4.png" alt="" /></a>
                <a href="http://www.natro.com/webhosting/?AFF=162037" target="_blank"><img src="images/5.png" alt="" /></a>
                <a href="http://www.bdpusula.com/2014/01/gelen-e-posta.html" target="_blank"><img src="images/2.png" alt="" /></a>
                <a href="http://www.bdpusula.com/2014/01/bdpusula-ile-roportaj-kitle-iletisim.html" target="_blank"><img src="images/3.png" alt="" /></a>
                <a href="http://www.bdpusula.com/2014/01/canm-affettim.html" target="_blank"><img src="images/4.png" alt="" /></a>
            
            </div>
        </div>
        <div class="paging_btrix">
            <a href="#" rel="1">1</a>
            <a href="#" rel="2">2</a>
            <a href="#" rel="3">3</a>
            <a href="#" rel="4">4</a>
            <a href="#" rel="5">5</a>
            <a href="#" rel="6">6</a>
            <a href="#" rel="7">7</a>
            <a href="#" rel="8">8</a>
            <a href="#" rel="9">9</a>
            <a href="#" rel="10">10</a>
        </div>
    </div>
    </div>
    <script type="text/javascript" src="https://bubenimbd.googlecode.com/svn/trunk/haberler/haberlerslayt/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging_btrix").show();
    $(".paging_btrix a:first").addClass("active");
     
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
     
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});
     
    //paging_btrix + Slider Function
    rotate = function(){
      var triggerID = $active.attr("rel") - 1; //Get number of times to slide
      var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

      $(".paging_btrix a").removeClass('active'); //Remove all active class
      $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
     
      //Slider Animation
      $(".image_reel").animate({
       left: -image_reelPosition
      }, 500 );
     
    };
     
    //Rotation + Timing Event
    rotateSwitch = function(){ 
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
       $active = $('.paging_btrix a.active').next();
       if ( $active.length === 0) { //If paging_btrix reaches the end...
        $active = $('.paging_btrix a:first'); //go back to first
       }
       rotate(); //Trigger the paging_btrix and slider function
      }, 5000); //Timer speed in milliseconds (3 seconds)
    };
     
    rotateSwitch(); //Run function on launch
     
    //On Hover
    $(".image_reel a").hover(function() {
      clearInterval(play); //Stop the rotation
    }, function() {
      rotateSwitch(); //Resume rotation
    });
     
    //On Click
    $(".paging_btrix a").click(function() {
      $active = $(this); //Activate the clicked paging_btrix
      //Reset Timer
      clearInterval(play); //Stop the rotation
      rotate(); //Trigger rotation immediately
      rotateSwitch(); // Resume rotation
      return false; //Prevent browser jump to link anchor
    });
     
    });
    </script>